<!-- src/components/DrawerPanelRight.vue -->
<template>
    <div class="drawer-overlay" :class="{ open: visible }" @click="closeDrawer">
        <div class="drawer-panel" :class="{ open: visible }" @click.stop>
            <div class="drawer-header">
                <h3 class="drawer-title">车辆设备信息</h3>
                <button class="close-btn" @click="closeDrawer">×</button>
            </div>

            <div class="drawer-content">
                <!-- 任务信息 -->
                <el-collapse v-model="activeNames" accordion>
                    <el-collapse-item v-for="(item, index) in getWorkEquLists" :key="index" :title="item.carNo" :name="item.carNo">
                        <div v-if="item.children && item.children.length > 0">
                            <div class="mater-card" v-for="(children, eq) in item.children" :key="eq">
                                <div class="tool-item-list">
                                    <p>名称：</p>
                                    <p>{{ children.title || "" }}</p>
                                </div>
                                <div class="tool-item-list">
                                    <p>数量：</p>
                                    <p>{{ children.count || "" }}（{{ children.unit || "" }}）</p>
                                </div>
                            </div>
                        </div>
                        <div v-else class="no-data">暂无数据</div>
                    </el-collapse-item>

                    <div class="drawer-header" style="padding: 10px; font-size: 5px; margin: 5px 0">
                        <h3 class="drawer-title" style="font-size: 14px">人员信息面板</h3>
                    </div>

                    <div class="radio-content">
                        <el-radio-group v-model="currentChooseRadio" size="mini">
                            <el-radio-button label="全部" class="radio-blue"> 全部({{ statistics.total }}) </el-radio-button>
                            <el-radio-button label="在线" class="radio-green"> 在线({{ statistics.online }}) </el-radio-button>
                            <el-radio-button label="离线" class="radio-red"> 离线({{ statistics.offline }}) </el-radio-button>
                        </el-radio-group>
                    </div>

                    <div class="search-content">
                        <input :placeholder="'搜索人员...'" v-model="fuzzySearch" class="personnel-search-input" @input="filterPersonnel" />
                    </div>

                    <div style="padding-bottom: 10px; max-height: 50vh; min-height: 10vh; overflow-y: scroll">
                        <!-- 使用过滤后的数据进行渲染 -->
                        <div class="user-content" v-for="(user, index) in filteredUserList" :key="index">
                            <div>{{ user.userName }} - {{ user.phone || "暂无电话" }}</div>
                            <div class="user-btn" :class="{ active: user.showTrack }" @click="toggleUserTrack(user)">
                                {{ user.showTrack ? "关闭轨迹" : "显示轨迹" }}
                            </div>
                        </div>

                        <!-- 无数据提示 -->
                        <div v-if="filteredUserList.length === 0" class="no-data">暂无匹配的人员信息</div>
                    </div>
                </el-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { getLocationUserByUserWork } from "@/api/bussiness/bussiness"; // 引入车辆位置接口
export default {
    name: "DrawerPanelRight",
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        trainListParams: {
            type: Array,
            default: () => [],
        },
        getWorkEquLists: {
            type: Array,
            default: () => [],
        },
        // 添加人员数据的prop
        currentChooseWorkUserList: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        // 监听visible属性变化
        visible(newVal, oldVal) {
            // 当页面关闭时（从true变为false）
            if (oldVal === true && newVal === false) {
                console.log("页面关闭，初始化搜索信息");
                this.resetSearch();
            }
        },
    },
    data() {
        return {
            activeNames: ["0"],
            currentChooseRadio: "全部",
            fuzzySearch: "", // 模糊搜索的字段信息
            activePanels: {
                task: true,
                personnel: true,
                vehicle: true,
            },
            // 添加用户轨迹显示状态跟踪
            userTrackStates: {}, // { userId: boolean }
            currentLocationViewData: {},
        };
    },
    computed: {
        statistics() {
            const total = this.currentChooseWorkUserList.length;
            const online = this.currentChooseWorkUserList.filter(user => user.onlineStatus === "1").length;
            const offline = this.currentChooseWorkUserList.filter(user => user.onlineStatus === "2").length;
            return {
                total,
                online,
                offline,
            };
        },

        // 计算属性：根据搜索关键词过滤人员列表
        filteredUserList() {
            let filteredList = [];

            // 根据单选按钮的选择过滤人员
            if (this.currentChooseRadio === "在线") {
                filteredList = this.currentChooseWorkUserList.filter(user => user.onlineStatus === "1");
            } else if (this.currentChooseRadio === "离线") {
                filteredList = this.currentChooseWorkUserList.filter(user => user.onlineStatus === "2");
            } else {
                // 默认显示全部人员
                filteredList = this.currentChooseWorkUserList;
            }

            // 如果没有搜索关键词，返回过滤后的所有人员
            if (!this.fuzzySearch || this.fuzzySearch.trim() === "") {
                return filteredList.map(user => ({
                    ...user,
                    showTrack: this.userTrackStates[user.id] || this.userTrackStates[user.userNo] || false,
                }));
            }

            // 获取搜索关键词（转换为小写以便不区分大小写搜索）
            const keyword = this.fuzzySearch.toLowerCase().trim();

            // 根据userName属性进行模糊搜索
            return filteredList
                .filter(user => {
                    // 确保userName存在并且包含搜索关键词
                    return user.userName && user.userName.toLowerCase().includes(keyword);
                })
                .map(user => ({
                    ...user,
                    showTrack: this.userTrackStates[user.id] || this.userTrackStates[user.userNo] || false,
                }));
        },
    },
    methods: {
        // 获取人员位置轨迹
        async fetchLocationUserByUserWork(userNo, workNo) {
            const userHistoryLocations = await getLocationUserByUserWork(userNo, workNo);
            if (userHistoryLocations.code == 200) {
                this.currentLocationViewData.response = userHistoryLocations;
                this.$emit("updateLocationView", this.currentLocationViewData);
                console.log("getLocationUserByUserWork 响应数据））））））））））））））））））））））:", userHistoryLocations);
            }
        },

        // 模糊搜索的方法（可以保留用于其他处理）
        filterPersonnel(e) {},
        // 切换用户轨迹显示状态
        // 切换用户轨迹显示状态
        toggleUserTrack(user) {
            // 获取当前用户的key
            const currentUserKey = user.id || user.userNo;

            // 获取当前用户的轨迹显示状态
            const currentUserState = this.userTrackStates[currentUserKey] || false;

            if (user.showTrack) {
                this.$emit("updateLocationView", null);
            } else {
            } // 如果当前是关闭状态（即将打开），则先清空历史轨迹并获取新轨迹数据
            if (!currentUserState) {
                // 1. 清空历史轨迹
                this.$emit("updateLocationView", null);
                var params = {
                    userNo: user.userNo,
                    workNo: user.workNo,
                };
                this.currentLocationViewData.params = params;
                this.currentLocationViewData.user = user;

                // 调用接口获取该用户的历史轨迹数据
                if (user.userNo && user.workNo) {
                    this.fetchLocationUserByUserWork(user.userNo, user.workNo);
                } else if (user.userNo) {
                    console.warn("缺少workNo参数，无法获取完整轨迹数据");
                }
            }

            // 清空所有用户的轨迹显示状态
            Object.keys(this.userTrackStates).forEach(userKey => {
                this.$set(this.userTrackStates, userKey, false);
            });

            // 如果之前不是显示状态，则开启当前用户的轨迹显示
            if (!currentUserState) {
                this.$set(this.userTrackStates, currentUserKey, true);
            }

            // 创建更新后的用户对象
            const updatedUser = { ...user, showTrack: !currentUserState };

            // 这里可以触发父组件的方法来处理轨迹显示逻辑
            this.$emit("toggle-user-track", updatedUser);
        },

        closeDrawer() {
            this.$emit("update:visible", false);
        },

        toggleCollapse(panel) {
            this.activePanels[panel] = !this.activePanels[panel];
        },
        // 重置搜索信息
        resetSearch() {
            this.fuzzySearch = ""; // 清空搜索关键词
            this.currentChooseRadio = "全部"; // 重置为全部选项
        },
    },
};
</script>
<style>
.user-content {
    background-color: rgba(2, 119, 189, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    width: 96%;
    margin-left: 2%;
    margin-top: 5px;
    padding: 0 0 0 10px;
    color: #fff;
    border-radius: 3px;
}
.user-btn {
    width: 30%;
    text-align: center;
    color: rgb(230, 162, 60);
    background: rgb(253, 246, 236);
    border-color: rgb(245, 218, 177);
    cursor: pointer;
}
.user-btn.active {
    width: 30%;
    text-align: center;
    color: rgb(103, 194, 58);
    background: rgb(240, 249, 235);
    border-color: rgb(194, 231, 176);
    cursor: pointer;
}
.radio-content {
    display: flex;
    justify-content: flex-end;
    margin: 5px 0;
}
.el-collapse-item__header {
    /*  */
    background-color: #1a3a6a;
    border-bottom: 1px solid #3a6cb0;
    color: #fff;
    padding: 0 10px;
}
.el-collapse-item__wrap {
    background-color: rgba(2, 119, 189, 0.3);
    color: #fff;
    padding: 15px;
}
.el-badge {
    margin-top: 15px;
}
</style>
<style scoped>
.no-data {
    text-align: center;
    padding: 20px;
    color: #90caf9;
    font-style: italic;
}
.mater-card {
    width: 100%;
    padding: 10px;
    background-color: rgba(2, 119, 189, 0.8);
    border: 1px solid #1a3a6a;
    color: #fff;
    margin-bottom: 8px;
    border-radius: 5px;
}
.tool-item-list {
    display: flex;
    margin-top: 5px;
}
.tool-item-list .left {
    width: 20%;
}
.tool-item-list .right {
    margin-left: 2%;
    width: 78%;
}
.tool-item-list p {
    margin: 0;
    padding: 0;
}
.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    max-height: calc(100% - 40px);
    background: #1a3a6a8a;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #4fc3f7;
    border-radius: 10px;
}

.drawer-panel.open {
    transform: translateX(0);
}

.drawer-header {
    padding: 20px;
    background: #0288d1b3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 10px 10px 0 0;
}

.drawer-title {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}
.personnel-search-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(2, 119, 189, 0.3);
    border: 1px solid rgba(79, 195, 247, 0.5);
    border-radius: 4px;
    color: #e3f2fd;
    font-size: 14px;
    box-sizing: border-box;
}

.personnel-search-input:focus {
    outline: none;
    border-color: #4fc3f7;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
}

.personnel-search-input::placeholder {
    color: #90caf9;
    opacity: 0.7;
}
.drawer-content {
    flex: 1;
    overflow-y: auto;
}

.collapse-item {
    margin-bottom: 15px;
    background: rgba(12, 30, 62, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(79, 195, 247, 0.3);
    overflow: hidden;
}

.collapse-header {
    padding: 15px;
    background: rgba(2, 119, 189, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.collapse-header:hover {
    background: rgba(2, 119, 189, 0.5);
}

.header-text {
    color: #4fc3f7;
    font-weight: 600;
    font-size: 16px;
}

.arrow {
    color: #4fc3f7;
    transition: transform 0.3s ease;
}

.arrow.rotated {
    transform: rotate(90deg);
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(12, 30, 62, 0.5);
}

.collapse-content.open {
    max-height: 1000px;
}

.info-item {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item label {
    color: #90caf9;
    font-weight: 500;
}

.info-item span {
    color: #e3f2fd;
    font-weight: 600;
}

.status-running {
    color: #4caf50;
    font-weight: 600;
}

.status-normal {
    color: #2196f3;
    font-weight: 600;
}

.person-list {
    padding: 10px 0;
}

.person-item {
    padding: 15px;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
}

.person-item:last-child {
    border-bottom: none;
}

.person-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.person-name {
    color: #e3f2fd;
    font-weight: 600;
    font-size: 16px;
}

.person-status {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.person-status.online {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.person-status.offline {
    background: rgba(158, 158, 158, 0.2);
    color: #bdbdbd;
    border: 1px solid rgba(158, 158, 158, 0.5);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.detail-item label {
    color: #90caf9;
}

.detail-item span {
    color: #bbdefb;
}

.battery-level {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.battery-fill {
    height: 8px;
    background: linear-gradient(90deg, #0277bd, #4fc3f7);
    border-radius: 4px;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.battery-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.battery-text {
    color: #4fc3f7;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}
</style>
